<template>
  <view class="fu-steps">
    <view
      class="fu-steps__wrapper"
      :class="[
        `fu-steps--${direction}`,
        {
          'fu-steps--dot': dot,
        },
      ]"
    >
      <slot></slot>
    </view>
  </view>
</template>

<script>
/**
 * fu-steps 步骤条组件
 * @description 用于展示操作流程的各个环节
 * @property {Number} active - 当前步骤
 * @property {String} direction - 显示方向，可选值：horizontal/vertical
 * @property {Boolean} dot - 是否开启点状样式
 * @property {String} activeColor - 激活状态颜色
 * @property {String} inactiveColor - 未激活状态颜色
 */
export default {
  name: 'fu-steps',
  props: {
    active: {
      type: Number,
      default: 0,
    },
    direction: {
      type: String,
      default: "horizontal",
      validator: (value) => ["horizontal", "vertical"].includes(value),
    },
    dot: {
      type: Boolean,
      default: false,
    },
    activeColor: {
      type: String,
      default: "",
    },
    inactiveColor: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      childSteps: [],
      childStepsSlotsLength: this.$slots.default().length,
    }
  },
  provide() {
    return {
      steps: {
        direction: () => this.direction,
        dot: () => this.dot,
        active: () => this.active,
        activeColor: () => this.activeColor,
        inactiveColor: () => this.inactiveColor,
        addStep: this.addStep,
        removeStep: this.removeStep,
      },
    }
  },
  methods: {
    addStep(step) {
      const index = this.childSteps.length
      this.childSteps.push(step)
      return {
        index,
        isLast: index === this.childStepsSlotsLength-1,
      }
    },
    removeStep(step) {
      const index = this.childSteps.indexOf(step)
      if (index !== -1) {
        this.childSteps.splice(index, 1)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.fu-steps {
  width: 100%;

  &__wrapper {
    position: relative;
    display: flex;

    &.fu-steps--horizontal {
      padding: 24rpx 40rpx;
      align-items: flex-start;
      justify-content: space-between;

      .fu-step {
        flex: 1;
      }
    }

    &.fu-steps--vertical {
      flex-direction: column;
      padding: 8rpx 24rpx;

      .fu-step {
        width: 100%;
      }
    }

    &.fu-steps--dot {
      .fu-step__circle {
        width: 12rpx;
        height: 12rpx;
        border: none;
        
        &::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: currentColor;
          border-radius: 50%;
          opacity: 0.3;
        }
      }
      
      .fu-step--active,
      .fu-step--finish {
        .fu-step__circle {
          background-color: currentColor;
          
          &::after {
            opacity: 0;
          }
        }
      }
      
      .fu-step__number {
        display: none;
      }
      
      .fu-step__line {
        margin: 0 8rpx;
      }
    }
  }
}
</style> 
